Custom Images and Themes (Branding)

Currently, the SafeNet Keycloak Agent does not provide any user interface to customize the theme and images. However, it can be changed manually by updating the images with the same name and resolution. You need to update the CSS styles in the custom.css file to update the Themes.

Customize the Background Image

1. Navigate to the directory {keycloakDirectory}\themes\sas-login-ui\login\resources\img

   

2. Replace your desired resource with the same name in the directory.

   1. background.jpg: The background image. (Recommended : JPG file with dimensions 1368px by 768px)
   2. bsid.ico: The BSID icon. (Recommended: ICO file with dimensions 48px X 48px)
   3. company_logo.png: The Company logo. (Recommended : PNG file with max. width of 300px)
   4. top_banner.png: The Company Banner image. (Recommended : PNG file with max. height of 75px)

3. The updated resources is reflected on the next login.

Customizing the Color of the Button on the Login Page

1. Navigate to the directory {keycloakDirectory}\themes\sas-login-ui\login\resources\css.

2. Open the file named custom.css.

3. Modify the css, by changing the color under: "sas-button" and save the file.

   

4. The changes are reflected on next Login or refresh the screen to see the changes.

Language Selection

SafeNet Keycloak Agent with SAS PCE is available in multiple languages. A language selection menu is available to the user on the login page. Once a language is selected, the whole UI switches to the selected language.

You should see the language selection menu as shown below:

The language selection menu is enabled in Keycloak admin console > Realm Settings > Themes.

If users are present in Keycloak database then user specific language becomes a priority.

Click on Save to save the new configuration of the Themes section as shown below. The supported locales are updated in the background but these changes aren't reflected in front end. For more information, refer to this issue.

1. Follow the below steps after realm configuration.

2. For existing realms, turn on the Internationalization enabled, the supported languages would appear, then Save the realm configuration. For new realms, this setting is enabled by default.

3. After configuration, the default set up of Themes section is shown below, just click Save.

   

Supported languages are:

• cs: Czech

• da: Danish

• de: German

• en: English

• es: Spanish

• fi: Finnish

• fr: French

• it: Italian

• ja: Japanese

• ko: Korean

• nb: Norwegian

• nl: Dutch

• sv: Swedish

• zh-CN: Chinese, Mainland China, simplified characters

• zh-TW: Chinese, Taiwan, traditional characters

Keyword Customization

Keycloak server provides the functionality to customize the text appearing on SafeNet Authentication Service login screen. Customization of keywords can be achieved in two ways:

1. Edit language specific JSON file

2. Create language specific locale file

Edit language specific JSON file

1. Locate the language specific JSON files, placed at {keycloakDirectory}\themes\sas-login-ui\login\resources\langs.

   

2. Edit the required JSON file and Save it.

   This step saves the changes temporarily. To save your updates permanently, follow the below step.

3. Go to Localization, then Upload localization JSON file section. Name the locale as specified in Language section, upload the file and click Import.

   

Create language specific locale file

1. Click Localization, go to Lookup section, create a locale and name it based on provided locale names in Language section.

   

2. Add localization text in the created locale with the corresponding Key Value pair, then Save it.

   Some important Key Value pair are enclosed below. To view all the Key Value pairs, go to JSON file of the desired language.

   Key	Default Value
   login-page-title-sas	SafeNet Authentication Service
   appname	SafeNet Authentication Service Console
   usernameOrEmail	Username
   password	Password
   button-login	Login

   

   

3. Sign in to SafeNet Authentication Service to see the updated keywords.